<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <title>武侯祠管理系统</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      .paddingNull{
        padding-left: 0px;
        padding-right: 0px;
      }
      .panel-travel{
        background-color:#FFCC66;
        color:#333333;
      }
      
      #feedback{
        border-bottom-color: #FFFFFF;
        border-left-color: #FFCC00;
        border-right-color: #FFFFFF;
        border-top-color: #FFCC00;

        border-bottom-left-radius:0px; 
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
      }
      

      #broadcasts{
        border-bottom-color: #FFFFFF;
        border-left-color: #FFFFFF;
        border-right-color: #FFCC00;
        border-top-color: #FFCC00;

        border-bottom-left-radius:0px; 
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
      }

      #information{
        border-bottom-color: #FFCC00;
        border-left-color: #FFFFFF;
        border-right-color: #FFCC00;
        border-top-color: #FFFFFF;

        border-bottom-left-radius:0px; 
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;

        margin-bottom: 0;
        margin-top: 20px;
      }

      #news{
        border-bottom-color: #FFCC00;
        border-left-color: #FFCC00;
        border-right-color: #FFFFFF;
        border-top-color: #FFFFFF;

        border-bottom-left-radius:0px; 
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;

        margin-bottom: 0;
        margin-top: 20px;
      }      
      #information-button{
        height: 124px;   
        padding-top: 25px;
        font-size: 24px;
      }
      #news-button{
        height: 124px;   
        padding-top: 25px;
        font-size: 24px;
      }      
      #broadcasts-button{
        height: 124px;   
        padding-top: 25px;
        font-size: 24px;
      }   
      #feedback-button{
        height: 124px;   
        padding-top: 25px;
        font-size: 24px;
      }                   
      #main-right{
          padding-right: 15px;
      }
    </style>

    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
  </head>
  <body>

    <nav class="navbar navbar-default">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">首页</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">景点</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">反馈</a></li>
        <li><a href="#">设置</a></li>
      </ul> 
    </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->
    </nav>

    <div class="row">
    <div id="carousel-example-generic" class="carousel slide col-md-12 " data-ride="carousel">
       <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
       </ol>

       <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/1.jpg" alt="mistake">
        </div>
        <div class="item">
          <img src="img/2.jpg" alt="mistake">
        </div>        
        <div class="item">
          <img src="img/3.jpg" alt="mistake">
        </div>
       </div>
       
       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
       </a> 
       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
       </a>
    </div>

    <div class="panel panel-info col-md-5 col-md-offset-1 "  id="information">
      <div class="panel-body">
        <div class="list-group col-md-9" >
          <a href="#" class="list-group-item">景点</a>
          <a href="#" class="list-group-item">美食</a>
          <a href="#" class="list-group-item">公厕</a>
        </div>
        <a class="btn btn-warning col-md-3 " href="#" role="button" id="information-button"> 
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span><br/>信息
        </a>  

      </div>
    </div>



    <div class="panel panel-info col-md-5  " id="news">
      <div class="panel-body">
        <div class="list-group col-md-9">
          <a href="#" class="list-group-item">热烈欢迎中央领导参观武侯祠</a>
          <a href="#" class="list-group-item">热烈欢迎中央领导参观武侯祠</a>
          <a href="#" class="list-group-item">热烈欢迎中央领导参观武侯祠</a>
        </div>
        <a class="btn btn-warning col-md-3 " href="#" role="button" id="news-button"> 
          <span class="glyphicon glyphicon-globe" aria-hidden="true"></span><br/>新闻
        </a>        
      </div>
    </div>
    

    <div class="panel panel-info col-md-5 col-md-offset-1  " id="broadcasts">
      <div class="panel-body">
        <div class="list-group col-md-9 ">
          <a href="#" class="list-group-item">园区将在下午五点关闭</a>
          <a href="#" class="list-group-item">园区将在下午五点关闭</a>
          <a href="#" class="list-group-item">园区将在下午五点关闭</a>
        </div>
        <a class="btn btn-warning col-md-3 " href="#" role="button" id="broadcasts-button"> 
          <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span><br/>广播
        </a>        
      </div>
    </div>

    <div class="panel panel-info col-md-5  "  id="feedback">
      <div class="panel-body">

        <div class="list-group col-md-9 ">
          <a href="#" class="list-group-item">2016.2.22的反馈</a>
          <a href="#" class="list-group-item">2016.2.22的反馈</a>
          <a href="#" class="list-group-item">2016.2.22的反馈</a>
        </div>
        <a class="btn btn-warning col-md-3 " href="#" role="button" id="feedback-button"> 
          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><br/>反馈
        </a>    
    </div>
    </div>

  </body>
</html>